
<template>
    <div class="app">
        <div  class="action">
          <router-view v-slot="{ Component }">
              <keep-alive>
                <component :is="Component" v-if="$route.meta.keepAlive" :key="$route.name" />
              </keep-alive>
              <component :is="Component" v-if="!$route.meta.keepAlive" />
            </router-view>
        </div>
        <router-view  name="footer" class="footer"/>
        <img src="@/assets/images/contact.png" alt="" id="lx" class="contact" @touchmove.prevent="touchmove" @click="onContact">
        <!-- <van-button type="primary">{{ $t("nav.chi") }}</van-button> -->
    </div>
    <content ref="refContent"></content>
  </template>
<script setup>
import content from "@/pages/personal/content.vue";
import { onChange } from '@/lang/index'
import { onMounted, ref } from "vue"
function onContact () {
    console.log("联系了哦")
    refContent.value.onKnow()
}
const refContent = ref(null)
let dom = ref(null)
onMounted(() => {
  onChange()
  setTimeout(() => {
    dom.value = document.getElementById("lx")
  }, 200)
})
let timer = ref(null)
function touchmove(e) {
  // console.log(e)
  let position = e.changedTouches[0]
  // if (timer.value) {
  //   clearTimeout(timer.value)
  //   timer.value = null
  // }
  // timer.value = setTimeout(() => {
  //   console.log("赋值了哦哦哦哦")
    
  // }, 10)
  dom.value.style.top = position.pageY - 25 + "px"
  dom.value.style.left = position.pageX - 25 + 'px'
}
</script>


<style lang="less">
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .action {
    flex: 1;
    overflow: auto;
  }
  .footer {
    height: 45px;
  }
  .contact {
    width: 50px;
    position: fixed;
    bottom: 170px;
    right: 0px;
  }
}
</style>